<template>
    <div class="user-info-page">
        <!-- 用户详情 -->
        <div class="user-details">
            <div class="avatar-section">
                <img :src="avatar" alt="用户头像" class="avatar" />
                <button @click="showAvatarModal = true" class="edit-btn">修改头像</button>
            </div>
            <div class="info-fields">
                <label>
                    账号：
                    <input v-model="userInfo.username" />
                </label>
                <label>
                    昵称：
                    <input v-model="userInfo.name" />
                </label>
                <label>
                    邮箱：
                    <input v-model="userInfo.email" />
                </label>
                <label>
                    电话：
                    <input v-model="userInfo.phone" />
                </label>
                <label>
                    QQ号：
                    <input v-model="userInfo.qq" />
                </label>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <button @click="showPasswordModal = true" class="btn">修改密码</button>
            <button @click="saveUserInfo" class="btn primary">保存信息</button>
        </div>

        <!-- 修改头像窗口 -->
        <div v-if="showAvatarModal" class="modal">
            <div class="modal-content">
                <h3>修改头像</h3>
                <input type="file" accept="image/*" @change="handleAvatarChange" />
                <div v-if="croppedImage" class="avatar-preview">
                    <img :src="croppedImage" alt="裁剪后的头像" />
                </div>
                <div class="modal-actions">
                    <button @click="saveAvatar" class="btn primary">保存</button>
                    <button @click="closeAvatarModal" class="btn">取消</button>
                </div>
            </div>
        </div>

        <!-- 修改密码窗口 -->
        <div v-if="showPasswordModal" class="modal">
            <div class="modal-content">
                <h3>修改密码</h3>
                <label>
                    账号：
                    <input v-model="userInfo.username" readonly />
                </label>
                <label>
                    原密码：
                    <input type="password" v-model="passwordForm.oldPassword" />
                </label>
                <label>
                    新密码：
                    <input type="password" v-model="passwordForm.newPassword" />
                </label>
                <label>
                    重复新密码：
                    <input type="password" v-model="passwordForm.repeatPassword" />
                </label>
                <div class="modal-actions">
                    <button @click="changePassword" class="btn primary">确认修改</button>
                    <button @click="closePasswordModal" class="btn">取消</button>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref } from "vue";
import { onMounted } from "vue";
import api from "../../api/api.js"
import { userStore } from '../../stores/userStore.js'


const avatar = ref("https://via.placeholder.com/100"); // 默认头像
const croppedImage = ref(null);
// 获取到的用户头像
let avatarfile = null;

const uid = ref(0); // 用户id
const userstore = userStore()

const userInfo = ref({
    uid: 0,
    role: 0,
    name: "小明",
    avatar: "https://via.placeholder.com/100",
    username: "useraccount",
    email: "test@test.com",
    phone: "00000000000",
    qq: "000000000",
    info: "这里是用户信息描述",
    createtime: "2021-01-01 00:00:00"
});

const passwordForm = ref({
    oldPassword: "",
    newPassword: "",
    repeatPassword: "",
});

const showAvatarModal = ref(false);
const showPasswordModal = ref(false);

//获取用户信息
const getUserInfo = async () => {
    try {
        const res = await api.getUserInfoApi({ uid: uid.value })
        userInfo.value = res.data
        avatar.value = userInfo.value.avatar
        uid.value = userInfo.value.uid
    } catch (error) {
        console.log("获取用户信息失败：", error);
    }
}

//页面开始加载用户信息
onMounted(async () => {
    try {
        uid.value = userstore.userid
        await getUserInfo()

    } catch (error) {
        console.log("页面加载失败：", error);
    }
})


// 处理头像修改
const handleAvatarChange = (event) => {
    avatarfile = event.target.files[0];
    if (avatarfile) {
        const reader = new FileReader();
        reader.onload = () => {
            croppedImage.value = reader.result; // 这里应添加裁剪逻辑
        };
        reader.readAsDataURL(avatarfile);
    }
};

// 上传头像
const saveAvatar = async () => {
    try {
        if (!avatarfile) {
            alert("请选择头像文件！");
            return;
        }
        const formData = new FormData();
        formData.append("file", avatarfile)
        formData.append("uid", uid.value)
        const res = await api.modifyAvatarApi(formData)
        avatar.value = res.data.avatar

        closeAvatarModal();
    } catch (error) {
        console.log("头像上传失败：", error);
    }
};

const closeAvatarModal = () => {
    showAvatarModal.value = false;
    croppedImage.value = null;
};

// 保存用户信息
const saveUserInfo = async () => {
    try {
        const res = await api.saveUserInfoApi({
            uid: uid.value,
            role: userInfo.value.role,
            name: userInfo.value.name,
            username: userInfo.value.username,
            email: userInfo.value.email,
            phone: userInfo.value.phone,
            qq: userInfo.value.qq,
            info: userInfo.value.info
        })

        await getUserInfo()

    } catch (error) {
        console.log("保存用户信息失败：", error);
    }
};

// 修改密码
const changePassword = async () => {
    try {
        if (
            !passwordForm.value.oldPassword ||
            !passwordForm.value.newPassword ||
            passwordForm.value.newPassword !== passwordForm.value.repeatPassword
        ) {
            alert("密码不一致或未填写完整！");
            return;
        }
        await api.modifyPwdApi({
            username: userInfo.value.username,
            oldPassword: passwordForm.value.oldPassword,
            newPassword: passwordForm.value.newPassword,
            repeatPassword: passwordForm.value.repeatPassword
        })
        alert("密码修改成功！");
        closePasswordModal();
    } catch (error) {
        console.log("修改密码失败：", error);
    }
};

const closePasswordModal = () => {
    showPasswordModal.value = false;
    passwordForm.value = {
        oldPassword: "",
        newPassword: "",
        repeatPassword: "",
    };
};


</script>
  
<style scoped>
/* 页面整体样式 */
.user-info-page {
    max-width: 600px;
    margin: 30px auto;
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 头像部分 */
.avatar-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid #409eff;
}

.edit-btn {
    background: #409eff;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

.edit-btn:hover {
    background: #307cd8;
}

/* 信息字段样式 */
.info-fields label {
    display: block;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #555;
}

.info-fields input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.info-fields input:focus {
    border-color: #409eff;
    outline: none;
}

/* 按钮样式 */
.action-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.btn {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s, color 0.3s;
}

.btn.primary {
    background: #409eff;
    color: white;
}

.btn.primary:hover {
    background: #307cd8;
}

.btn {
    background: #f0f0f0;
    color: #333;
}

.btn:hover {
    background: #ddd;
}

/* 弹窗样式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 350px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.modal-content h3 {
    margin-bottom: 20px;
    font-size: 18px;
    color: #333;
    border-bottom: 2px solid #409eff;
    padding-bottom: 8px;
}

.modal-content label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}

.modal-content input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.modal-content input:focus {
    border-color: #409eff;
    outline: none;
}

.modal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.modal-actions .btn {
    width: 48%;
}

/* 头像裁剪预览 */
.avatar-preview img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 10px auto;
    border: 2px solid #409eff;
}
</style>



  